<template>
  <view v-if="shenheStatus == 0" class="page">
    <u-tabs
      ref="uTabs"
      :list="tabList"
      :current="current"
      active-color="#FA230A"
      item-width="50%"
      @change="tabsChange"
      inactive-color="#262626"
    ></u-tabs>

    <view class="detailBox" v-for="(item, index) in list" :key="index">
      <view class="detail">
        <view class="type">
          <text>{{ item.content }}</text>
          <text>{{ item.date }}</text>
        </view>
        <view class="count"
          >{{ log_type === "1" ? "+" : "-" }} {{ item.amount }}</view
        >
      </view>
    </view>

    <toolsMore :status="moreStatus"></toolsMore>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";
import { getAccountLog } from "@/api/user";

export default {
  components: {
    Shenhe,
    toolsMore,
  },
  data() {
    return {
      current: 0,
      tabList: [
        {
          name: "收入",
          status: "1",
        },
        {
          name: "支出",
          status: "2",
        },
      ],

      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      type: "0",
      log_type: "1", // 1收入 2支出
    };
  },

  onLoad({ type }) {
    this.type = type;
    this.getList();
  },

  methods: {
    tabsChange(e) {
      this.current = e;
      this.log_type = this.tabList[e].status;
      this.clearData();
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];
      this.getList();
    },

    async getList() {
      let { list: oldList, page, type, log_type } = this;
      this.moreStatus = 2;

      try {
        const res = await getAccountLog({
          page,
          limit: 10,
          type,
          log_type,
        });

        uni.stopPullDownRefresh();
        this.moreStatus = 1;
        if (res.code == 0) {
          let { list, row_count } = res.data,
            count = parseInt(row_count);
          if (list.length) {
            oldList.push(...list);
            this.page = page + 1;
          }
          if (oldList.length >= count) {
            this.isEnd = true;
            this.moreStatus = 3;
          }
        }
      } catch (error) {
        this.moreStatus = 1;
        uni.stopPullDownRefresh();
        this.$utils.toast(error);
      }
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getList();
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.detailBox {
  width: 100%;
  padding-left: 36rpx;
  background-color: #fff;
  .detail {
    padding: 24rpx 36rpx 24rpx 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;

    .type {
      width: 500rpx;
      max-width: 500rpx;
      display: flex;
      flex-direction: column;
      font-family: PingFang SC;
      font-size: 28rpx;
      color: #262626;

      text:nth-child(2) {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 4rpx;
      }
    }
    .count {
      font-size: 36rpx;
      color: #262626;
      font-weight: 600;
    }
  }
}
.detailBox:last-child {
  .detail {
    border-bottom: none;
  }
}
</style>
